<template>
  <div class="apps-box">
    <el-header>icon对照表</el-header>
    <el-editable
      class="apps-list"
      :data="iconList"
      height="200"
      row-key="icon"
      :columns="iconColumns"
    >
      <template slot="default-iconImg" slot-scope="scope">
        <div class="logo-box">
          <m-iconfont size="22" :icon='scope.row.icon' />
          <!-- <icon-font class="icon-item" :icon="scope.row.icon" /> -->
        </div>
      </template>
    </el-editable>
  </div>
</template>
<script>
import mIconfont from '@pc/m-components/m-iconfont';
import {iconColumns, iconList} from './iconfont'
import ElEditable from '@components/el-editable/door/index.vue'
export default {
  name: 'iconfont',
  components: {ElEditable, mIconfont},
  data() {
    return {
      iconColumns,
      iconList
    }
  }
}
</script>
<style lang="less" scoped>
.apps-box {
  display: flex;
  flex-direction: column;

  .apps-list {
    flex: 1;

    .logo-box {
      height: 40px;

      .icon-item {
        font-size: 25px;
        line-height: 40px;
      }
    }
  }
}
</style>
